<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset='utf-8' />
    <title>妙可蓝多央视少儿作品征集</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link href="css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
    <link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div class="page rank">
        <div class="server-box flex" style="top: .4rem;">
            <img src="images/server_icon.png" alt="" />
            <p>客服</p>
        </div>
        <div class="title-box">排行榜</div>
        <div class="rank-nav-box flex">
            <div class="rank-nav-item onthis"></div>
            <div class="rank-nav-item"></div>
        </div>
        <div class="box rank">
            <div class="rank-top-three-box flex">
                <div class="rank-top-three-item">
                    <img src="images/rank_img_demo.jpg" alt="" />
                    <div class="rank-top-three-item-ranking">No.2</div>
                    <div class="rank-top-three-item-votes">999票</div>
                    <div class="rank-top-three-item-number">0001号作品</div>
                    <div class="rank-top-three-item-info">
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                </div>
                <div class="rank-top-three-item">
                    <img src="images/rank_img_demo.jpg" alt="" />
                    <div class="rank-top-three-item-ranking">No.1</div>
                    <div class="rank-top-three-item-votes">999票</div>
                    <div class="rank-top-three-item-number">0001号作品</div>
                    <div class="rank-top-three-item-info">
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                </div>
                <div class="rank-top-three-item">
                    <img src="images/rank_img_demo.jpg" alt="" />
                    <div class="rank-top-three-item-ranking">No.3</div>
                    <div class="rank-top-three-item-votes">999票</div>
                    <div class="rank-top-three-item-number">0001号作品</div>
                    <div class="rank-top-three-item-info">
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                </div>
            </div>
            <div class="rank-list-box">
                <div class="rank-list-item flex">
                    <div class="rank-list-item-ranking">4</div>
                    <img src="images/rank_img_demo1.jpg" alt="" />
                    <div class="rank-list-item-info">
                        <p>0001号作品</p>
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                    <div class="rank-list-item-middle"></div>
                    <div class="rank-list-item-votes">888票</div>
                </div>
                <div class="rank-list-item flex">
                    <div class="rank-list-item-ranking">5</div>
                    <img src="images/rank_img_demo1.jpg" alt="" />
                    <div class="rank-list-item-info">
                        <p>0001号作品</p>
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                    <div class="rank-list-item-middle"></div>
                    <div class="rank-list-item-votes">888票</div>
                </div>
                <div class="rank-list-item flex">
                    <div class="rank-list-item-ranking">6</div>
                    <img src="images/rank_img_demo1.jpg" alt="" />
                    <div class="rank-list-item-info">
                        <p>0001号作品</p>
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                    <div class="rank-list-item-middle"></div>
                    <div class="rank-list-item-votes">888票</div>
                </div>
                <div class="rank-list-item flex">
                    <div class="rank-list-item-ranking">7</div>
                    <img src="images/rank_img_demo1.jpg" alt="" />
                    <div class="rank-list-item-info">
                        <p>0001号作品</p>
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                    <div class="rank-list-item-middle"></div>
                    <div class="rank-list-item-votes">888票</div>
                </div>
                <div class="rank-list-item flex">
                    <div class="rank-list-item-ranking">8</div>
                    <img src="images/rank_img_demo1.jpg" alt="" />
                    <div class="rank-list-item-info">
                        <p>0001号作品</p>
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                    <div class="rank-list-item-middle"></div>
                    <div class="rank-list-item-votes">888票</div>
                </div>
                <div class="rank-list-item flex">
                    <div class="rank-list-item-ranking">9</div>
                    <img src="images/rank_img_demo1.jpg" alt="" />
                    <div class="rank-list-item-info">
                        <p>0001号作品</p>
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                    <div class="rank-list-item-middle"></div>
                    <div class="rank-list-item-votes">888票</div>
                </div>
                <div class="rank-list-item flex">
                    <div class="rank-list-item-ranking">10</div>
                    <img src="images/rank_img_demo1.jpg" alt="" />
                    <div class="rank-list-item-info">
                        <p>0001号作品</p>
                        <p>唱歌唱歌来唱歌</p>
                        <p>瓦西里小朋友</p>
                    </div>
                    <div class="rank-list-item-middle"></div>
                    <div class="rank-list-item-votes">888票</div>
                </div>
            </div>
        </div>
        <a href="#" class="sign-in-btn"><img src="images/sign_in_btn.png" width="100%" alt="" /></a>
        <div class="three-btns-box flex">
            <a href="#"><img src="images/intro_btn_img.png" width="100%" alt=""></a>
            <a href="#"><img src="images/vote_btn_img.png" width="100%" alt=""></a>
            <a href="#"><img src="images/rank_btn_img.png" width="100%" alt=""></a>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
    <script type="text/javascript">
        $('.rank-nav-item').click(function (e) {
            $('.rank-nav-item').removeClass('onthis');
            $(this).addClass('onthis');
        })
    </script>

</body>
</html>